<script setup lang="ts">
import NavItem from "../../components/nav-item/navItem.vue";
import IndexTopItem from "../../components/index-top-item/index.vue";
</script>

<template>
    <div class="w-100% h-100% flex flex-col">
    <div class="w-100% h-10%">
      <index-top-item></index-top-item>
    </div>
    <div class="flex-1 flex flex-row overflow-auto">
      <div class="w-10% h-100%">
        <nav-item></nav-item>
      </div>
      <div class="overflow-auto flex-1 flex m-20 rounded-20px overflow-auto">
        <div
          class="flex-1 bg-[#f2fbff] p-20px overflow-auto"
          dark="bg-[#8181814d]"
        >
          <!-- animate__fadeInRight -->
          <transition
            mode="out-in"
            enter-active-class="animate__animated animate__zoomInDown"
          >
            <keep-alive>
              <router-view />
            </keep-alive>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
